<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Mednalytics</title>
  <!-- Iconic Fonts -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="../../vendors/iconic-fonts/font-awesome/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="../../vendors/iconic-fonts/flat-icons/flaticon.css">
  <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins.css">
  <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins-colors.css">
  <!-- Bootstrap core CSS -->
  <link href="../../assets/css/bootstrap.min.css" rel="stylesheet">
  <!-- Page Specific Css (Datatables.css) -->
  <link href="../../assets/css/datatables.min.css" rel="stylesheet">
  <!-- jQuery UI -->
  <link href="../../assets/css/jquery-ui.min.css" rel="stylesheet">
  <!-- Page Specific CSS (Slick Slider.css) -->
  <link href="../../assets/css/slick.css" rel="stylesheet">
  <!-- Mednalytics styles -->
  <link href="../../assets/css/style.css" rel="stylesheet">

  <!-- Favicon -->
  <link rel="icon" type="image/png" sizes="32x32" href="../../favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body class="ms-body ms-aside-left-open ms-primary-theme ms-has-quickbar">
<!-- Setting Panel -->
<script src="../../assets/reuseCode/top.js"></script>
    <!-- Body Content Wrapper -->
    <div class="ms-content-wrapper">
      <div class="row">
        <div class="col-md-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb pl-0">
              <li class="breadcrumb-item"><a href="index.html"><i class="material-icons">home</i>主页</a></li>
              <li class="breadcrumb-item">预约</li>
              <li class="breadcrumb-item active" aria-current="page">添加预约</li>
            </ol>
          </nav>
        </div>
        <div class="col-xl-12 col-md-12">
          <div class="ms-panel">
            <div class="ms-panel-header ms-panel-custome">
              <h6>添加预约</h6>
              <a href="appointment-list.html" class="ms-text-primary">预约列表</a>
            </div>
            <div class="ms-panel-body">
              <form class="needs-validation"  @submit.prevent="submitAppointment">
                <div class="form-row" id="add_appointment_title" >
                  <div class="col-md-3 mb-3">
                    <label >患者姓名</label>
                    <div class="input-group">
                      <input type="text" class="form-control info" id="name" v-model="this.name" required>
                    </div>
                  </div>
                  <div class="col-md-3 mb-3">
                    <label  >患者年龄</label>
                    <div class="input-group">
                      <input type="text" class="form-control info" id="age" v-model="this.age" required>
                    </div>
                </div>
                    <div class="col-md-3 mb-3">
                        <label>性别</label>
                        <ul class="ms-list d-flex">
                            <li class="ms-list-item pl-0">
                                <label class="ms-checkbox-wrap">
                                    <input type="radio" name="sex" value="男" >
                                    <i class="ms-checkbox-check"></i>
                                </label>
                                <span> 男 </span>
                            </li>
                            <li class="ms-list-item">
                                <label class="ms-checkbox-wrap">
                                    <input type="radio" name="sex" value="女" >
                                    <i class="ms-checkbox-check"></i>
                                </label>
                                <span> 女 </span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-md-3 mb-3">
                        <label  >患者电话</label>
                        <div class="input-group">
                            <input type="text" class="form-control info" id="phone" v-model="this.phone" required>
                        </div>
                    </div>
                  <div class="col-md-3 mb-3">
                    <label >预约科室名称</label>
                    <div class="input-group">
                      <select class="form-control info" onchange="loadDoctors(this.value)" id="selectDepartment">
                          <option value="" selected="selected">请选择---</option>
                        <option  v-for="item in departments" v-text="item.officeName" v-bind:value="item.id" v-bind:id="item.officeId">
                        </option>
                      </select>
                    </div>
                  </div>

                </div>
                <div class="form-row">
                    <div class="col-md-3 mb-3">
                        <label >预约医生</label>
                        <div class="input-group">
                            <select class="form-control info"   id="selectDoctor">
                                <option value="" selected="selected">请选择---</option>
                            </select>
                        </div>
                    </div>
                  <div class="col-md-3 mb-3">
                    <label >预约时间(7天内)</label>
                    <div class="input-group">
                      <input type="datetime-local" class="form-control" id="date" v-model="this.appointtime" required>
                    </div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="col-md-6 mb-2">
                    <label>症状描述(必填)</label>
                    <div class="input-group">
                      <textarea class="form-control info"  rows="3" required></textarea>

                    </div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="col-md-3 mb-3">
                      <span>
                          <button class="btn btn-warning mt-4 d-inline w-20" type="button" @click="clearAll()">重新填写</button>
                          <button class="btn btn-primary mt-4 d-inline w-20"  type="submit" id="save" >保存</button>
                      </span>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

  <!-- Reminder Modal -->
<script src="../../assets/reuseCode/reminderModal.js"></script>
  <!-- Notes Modal -->
<script src="../../assets/reuseCode/notesModal.js"></script>
  <!-- Modal -->
 <script src="../../assets/reuseCode/modal.js"></script>
  <!-- SCRIPTS -->
  <!-- Global Required Scripts Start -->
  <script src="../../assets/js/jquery-3.3.1.min.js"></script>
  <script src="../../assets/js/popper.min.js"></script>
  <script src="../../assets/js/bootstrap.min.js"></script>
  <script src="../../assets/js/perfect-scrollbar.js"> </script>
  <script src="../../assets/js/jquery-ui.min.js"> </script>
  <!-- Global Required Scripts End -->
  <!-- Page Specific Scripts Start -->
  <script src="../../assets/js/slick.min.js"> </script>
  <script src="../../assets/js/moment.js"> </script>
  <script src="../../assets/js/jquery.webticker.min.js"> </script>
  <!-- Page Specific Scripts Finish -->

  <!-- mednalytics core JavaScript -->
  <script src="../../assets/js/framework.js"></script>
  <!-- Settings -->
  <script src="../../assets/js/settings.js"></script>
<!--加载内容的js-->
  <script src="../../assets/js/appointment/add_appointment_title.js"></script>

</body>

</html>
